<template>
	<view>
		<block v-if="value">
			<view style="margin-left: 10px;margin-right: 10px;padding: 5px;" class="cu-item relative default-view space-between  bg-white margin-bottom overflow" :class="['style-'+stype]"
			 @tap="goDetail(value.id)" v-if="stype=='list'">
				<view class="goods-thumb bg-white" >
					<image mode="aspectFill" :src="value.type==0?value.product.picture:value.picture" style="border-radius: 15px;"></image>
				</view>
				<view class="goods_info w100 padding-left-sm">
					<view class="title text-lg text-overflow " style="padding: 10px;color: #000000;font-weight: bold;">{{value.type==0?value.product.name:value.title}}</view>
					<view class="title text-lg " style="height: 20px; padding: 5px;font-size: 20rpx;display: -webkit-box;-webkit-box-orient: vertical;    
    -webkit-line-clamp: 2; line-height: 34rpx;">{{value.type==0?value.product.sketch:value.sketch}}</view>
					<!-- <view class="text-gray">已拼{{value.wholesaleDoneCount?value.wholesaleDoneCount.length:0}}</view> -->
					<view class="space-between margin-top-xs" style="bottom: 0;">
						<text class="text-price text-red text-lg" >{{value.type==0?value.product.wholesale_price:value.wholesale_price}}</text>
						<!-- <image src="../../static/icnpin.png" mode="widthFix" style="width: 50px; height: 50px;margin-top: -15px;"></image> -->
						<text style="margin-right: 5px;border-radius: 15px;border: 1px solid #FF4A4A;color: #FF4A4A;width: 60px;height: 20px;text-align: center;font-size: 12px;line-height: 20px;">去秒拼></text>
					</view>
					
				</view>
				<view class="absolute whonum padding-tb-xs padding-lr-sm">
					<text class="sm margin-bottom-xs text-sm" style="font-size: .5rem;display: block;" v-if="value.product.pic_skech != ''">{{value.product.pic_skech}}</text>
					<!-- {{value.num}}人团 -->
				</view>
				
			</view>
				
			<view class="cu-item relative default-view space-between  bg-white margin-lr margin-bottom overflow" :class="['style-'+stype]"
			 @tap="goDetail(value.id)" v-else-if="stype=='list2'">
				<view class="goods-thumb bg-white">
					<image mode="aspectFill" :src="value.type==0?value.product.picture:value.picture"></image>
				</view>
				<view class="goods_info w100 padding-left-sm">
					<view class="title text-lg text-overflow2 margin-tb-sm ">{{value.type==0?value.product.name:value.title}}</view>
					<view class="text-gray">已拼{{value.wholesaleDoneCount.length}}</view>
					<view class="space-between margin-top-xs">
						<text class="text-price text-red text-lg">{{value.type==0?value.product.wholesale_price:value.wholesale_price}}</text>
						<text class="cu-btn round sm" :class="'bg-'+theme">去拼团</text>
					</view>
				</view>
				<view class="absolute bg-orange whonum padding-tb-xs padding-lr-sm">
					<!-- <text class="  sm margin-bottom-xs ">{{value.num}}人团</text> -->
				</view>
			</view>
			<view class=" default-view  margin-bottom bg-white" :class="['style-'+stype,'column'+col,'index'+indexvalue]" @tap="goDetail(value.product_id)"
			 v-else>
				<view class="goods-li overflow" :class="col==1?'text-lg':'text-sm'">
					<block v-if="col==1">
						<view class="goods-thumb">
							<image :src="value.type==0?value.product.picture:value.picture" mode="aspectFill" style="height: 400rpx;"></image>
						</view>
						<view class="goods-name  text-black margin-top-xs text-overflow">{{value.type==0?value.product.name:value.title}}</view>
						<view class="goods-bottom  space-between  margin-tb-xs">
							<view class="text-red text-red text-price text-lg">{{value.type==0?value.product.wholesale_price:value.wholesale_price}}</view>
							<!-- <view class="cu-tag light bg-brown sm round">{{value.num}}人团</view> -->
						</view>
					</block>
					<block v-if="col==2">
						<view class="goods-thumb">
							<image :src="value.type==0?value.product.picture:value.picture" mode="aspectFill"></image>
						</view>
						<view class="goods-name  text-black margin-top-xs text-overflow-2">{{value.type==0?value.product.name:value.title}}</view>
						<view class="goods-bottom  space-between margin-tb-xs">
							<view class="text-red text-red text-price text-df">{{value.type==0?value.product.wholesale_price:value.wholesale_price}}</view>
							<!-- <view class="cu-tag light bg-brown sm round">{{value.num}}人团</view> -->
						</view>
					</block>
					<block v-if="col==3">
						<view class="goods-thumb">
							<image :src="value.type==0?value.product.picture:value.picture" mode="aspectFill"></image>
						</view>
						<view class="goods-name  text-black margin-top-xs text-overflow-2">{{value.type==0?value.product.name:value.picture}}</view>
						<view class="goods-bottom  space-between margin-tb-xs ">
							<view class="text-red text-red text-price text-df">{{value.type==0?value.product.wholesale_price:value.wholesale_price}}</view>
							<!-- <view class="cu-tag light bg-brown sm round">{{value.num}}人团</view> -->
						</view>
					</block>
				</view>
			</view>
			
		</block>
		
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			value: {
				type: Object,
				default: null
			},
			stype: {
				type: String,
				default: "one"
			},
			col: {
				type: String,
				default: "1"
			},
			indexvalue: {
				type: String,
				default: "1"
			},
		},
		created: function(e) {},
		data() {
			return {
				theme: this.$config.THEME(),
				// lineIndex:0,
			}
		},
		methods: {
			goDetail(id) {
				console.log(this.value)
				// uni.navigateTo({
				// 	url: "/pages/shop/marketing/wholesale?id=" + this.value.id
				// })
				this.$common.showSuccess('暂未开放')
				return
			},
		},
	}
</script>

<style>
	.style-map {}

	.style-list {}

	.goods-li {
		/* border: 1px solid #E0E0E0; */
		border-radius: 5px;
	}

	.goods-li .goods-thumb {
		width: 100%;
		/* min-height: 280rpx; */
		overflow: hidden;
	}

	.goods-thumb image {
		width: 100%;
		height: 100%;
	}

	.goods-li .goods-name {
		text-align: justify;
		overflow: hidden;
		height: 60rpx;
		line-height: 30rpx;
	}

	.goods-li .goods-bottom {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
	}

	.goods_info {
		height: auto;
		overflow: hidden;
	}

	.goods_info .title {
		height: 60rpx;
		line-height: 30rpx;
		overflow: hidden;
	}

	.goods_info .text-price {
		margin: 10rpx 0;
	}

	.column1 {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.column1 .goods-name {
		font-size: 32rpx;
		line-height: 50rpx;
	}

	.column2 .goods-name {
		line-height: 40rpx;
		height: 80rpx;
	}

	.column2.index0 {
		margin-left: 20upx;
		margin-right: 10upx;
	}

	.column2.index1 {
		margin-right: 20upx;
		margin-left: 10upx;
	}

	.column3.index0 {
		margin-left: 20upx;
		margin-right: 10upx;
	}

	.column3.index1 {
		margin-left: 10upx;
		margin-right: 10upx;
	}

	.column3.index2 {
		margin-left: 10upx;
		margin-right: 20upx;
	}

	.column1 .goods-thumb {
		min-height: 280rpx;
	}

	.column2 .goods-thumb {
		height: 300rpx;
	}

	.column3 .goods-thumb {
		height: 200rpx;
	}

	.style-rush {
		margin-left: 5upx !important;
		margin-right: 5upx !important;
	}

	.column1 .goods-name2 {
		line-height: 40rpx;
		height: 40rpx;
	}

	.column3 .goods-name2,
	.column2 .goods-name2 {
		line-height: 30rpx;
		height: 30rpx;
	}

	.style-list .goods-thumb {
		width: 180rpx;
		height: 180rpx;
		min-width: 180rpx;
	}

	.style-list2 .goods-thumb {
		width: 220rpx;
		height: 220rpx;
		min-width: 220rpx;
	}


	.style-list2 .goods_info {
		height: 220rpx;
		overflow: hidden;
	}

	.style-list2 .goods_info .title {
		height: 80rpx;
		line-height: 40rpx;
		overflow: hidden;
	}

	.style-list2 .goods_info .text-price {
		margin: 10rpx 0;
	}
	.style-swiper {
		margin-left: 10rpx !important;
		margin-right: 10rpx !important;
	}

	.style-swiper.column1 {}

	.thumb-height {
		height: 240rpx;
	}

	.whonum {
		left: 0;
		bottom: 0rpx;
		/* border-radius: 0 30rpx 30rpx 0; */
		border-radius: 0 15px 15px 0;
		/* width: 40px; */
		background-color: #FE335B;color: #ffffff;top: 0px;height: 20px;line-height: 13px;
	}
</style>
